<template>
  <div class="qckc">
    <el-button
      type="primary"
      @click="fanhui"
      style="margin-bottom: 20px; width: 100px; height: 40px"
      >返回</el-button
    >
    <header>
      <div class="header-left">
        <img class="img1" :src="configUrl + oPagination.goods_img" alt="" />
        <p class="p1">{{ oPagination.goods_name }}</p>
      </div>
      <div class="header-right">库存数：{{ oPagination.stock_num }}</div>
    </header>

    <div class="content">
      <div class="head">
        <el-form class="h-from" ref="form" :model="form" label-width="80px">
          <el-form-item label="活动时间">
            <el-col :span="11">
              <el-date-picker
                @change="getListForDetail"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                v-model="form.start_date"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center">-</el-col>
            <el-col :span="11">
              <el-date-picker
                @change="getListForDetail"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                v-model="form.end_date"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          style="margin: 30px 0 0 20px; width: 100px; height: 40px"
          @click="getListForDetail"
          >查询</el-button
        >
      </div>

      <el-table
        :data="tableData"
        style="width: 92%; margin: 0 4%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column prop="date" label="操作时间"> </el-table-column>
        <el-table-column prop="address" label="操作数量"> </el-table-column>
        <el-table-column prop="name" label="详细说明"> </el-table-column>
      </el-table>

      <div class="fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="oPagination.total"
          @current-change="currentChange"
          :page-count="oPagination.page_count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getStockDetail,
} from '@/api/nested'
export default {
  data() {
    return {
      form: {
        start_date: "",
        end_date: "",
      },
      oPagination: {
        page_num: 1,
        page_size: 10,
        total: 0,
        page_count: 0,
        goods_img: "",
        goods_name: "",
        goods_sku: "",
        stock_num: "",
      },
      tableData: [],
    };
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    fanhui() {
      this.$router.back();
    },
    // 分页
    currentChange(val) {
      this.oPagination.page_num = val;
      this.getListForDetail();
    },
    getListForDetail() {
      let obj = {
        token: this.token,
        page_size: this.oPagination.page_size,
        page_num: this.oPagination.page_num,
        goods_id: Number(this.$route.query.id),
        type: Number(this.$route.query.type),
      };
      if (this.$route.query.class_id) {
        obj.class_id = Number(this.$route.query.class_id);
      };
      if (this.form.start_date && this.form.end_date &&
        new Date(this.form.start_date).getTime() < new Date(this.form.end_date).getTime()) {
        obj.start_date = this.form.start_date;
        obj.end_date = this.form.end_date;
      }
      getStockDetail(obj).then(res => {
        if (res.state) {
          const { all_data_num, all_page_num, list, goods_img, goods_name, goods_sku, stock_num, current_page_num, current_page_size } = res.data;
          this.tableData = list;
          this.oPagination.total = all_data_num;
          this.oPagination.page_count = all_page_num;
          this.oPagination.page_num = current_page_num;
          this.oPagination.page_size = current_page_size;//一页的显示的数量默认10

          this.oPagination.goods_img = goods_img;
          this.oPagination.goods_name = goods_name;
          this.oPagination.goods_sku = goods_sku;
          this.oPagination.stock_num = stock_num;
        }
      })
    }
  },
  mounted() {
    this.getListForDetail()
  }
};
</script>

<style lang="scss" scoped>
.qckc {
  width: 98%;
  overflow: hidden;
  margin: 1%;
  overflow: hidden;

  header {
    width: 100%;
    height: 100px;
    margin-bottom: 20px;
    background-color: #fff;
    display: flex;
    padding: 0 4%;
    .header-left {
      width: 50%;
      line-height: 100px;
      display: flex;
      .img1 {
        width: 50px;
        height: 50px;
        margin-top: 25px;
      }
      .p1 {
        margin: 0 0 0 20px;
      }
    }
    .header-right {
      line-height: 100px;
    }
  }
  .content {
    width: 100%;
    height: 500px;
    background-color: #fff;
    .head {
      display: flex;
      // justify-content: space-around;
      .h-from {
        margin: 30px 0 0 49%;
      }
    }
    .fenye {
      width: 100%;
      margin-top: 80px;
      .el-pagination,
      .is-background {
        float: right;
        margin-right: 12%;
      }
    }
  }
}
</style>